<template>
  <div class="procurement_box">
    <el-row>
      <el-col :span="4"><div class="lable-title">业务总概</div></el-col>
    </el-row>
    <div v-if="viewData" class="procurement_data-item">
      <el-row>
        <el-col :span="4">
          <p class="row-title-lable">客服数量</p>
          <p class="row-data">
            <count-to :start-val="0" :end-val="viewData.supervisorNumber" :duration="3000" class="card-panel-num" />
            <span class="data_unit">个</span>
          </p>
        </el-col>
        <el-col :span="4">
          <p class="row-title-lable">业务员数量</p>
          <p class="row-data">
            <count-to :start-val="0" :end-val="viewData.purNumber" :duration="3000" class="card-panel-num " />
            <span class="data_unit">个</span>
          </p>
        </el-col>
        <el-col :span="4">
          <p class="row-title-lable">供应商数量</p>
          <p class="row-data">
            <count-to :start-val="0" :end-val="viewData.supNumber " :duration="3000" class="card-panel-num " />
            <span class="data_unit">个</span>
          </p>
        </el-col>
        <el-col :span="4">
          <p class="row-title-lable">公司供应商数量</p>
          <p class="row-data">
            <count-to :start-val="0" :end-val="viewData.notBindSupNumber " :duration="3000" class="card-panel-num " />
            <span class="data_unit">个</span>
          </p>
        </el-col>
        <!-- <el-col :span="4">
          <p class="row-title-lable">待分配供应商数量</p>
          <p class="row-data">
            <count-to :start-val="0" :end-val="viewData.notAllotSupNumber" :duration="3000" class="card-panel-num " />
            <span class="data_unit">个</span>
          </p>
        </el-col> -->
      </el-row>

    </div>
  </div>
</template>

<script>
// import btnGroup from '@/components/TopBtnGroup'
import CountTo from 'vue-count-to'
import { customerServiceOverdata } from '@/api/data'
export default {
  name: 'Overview',
  components: { CountTo },
  data() {
    return {
      viewData: null
    }
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    async init() {
      var result = await customerServiceOverdata()
      if (result.code === 200) this.viewData = result.data
    }
  }
}
</script>

<style scoped>
.procurement_box{
  padding: 20px;
}
.procurement_data-item{margin-top: 10px;}
.row-title-lable,.data_unit{
  font-size: 14px;
  color: #333;
}
.row-data{
    color: #1890ff;
    font-size: 20px;
    font-weight: bold;
}
.card-panel-num{
  font-size: 28px;
}
 .lable-title{font-weight: bold;}

</style>
